<!--左侧表单拖拽时触发,拖动一个表单触发一次 -->
<template>
  <span>
    <template v-if="element.type == 'input'">
      <el-input
        v-model="element.options.defaultValue"
        :style="blockStyle(isTable, '100%')"
        :placeholder="element.options.placeholder"
        :disabled="element.options.disabled"
      ></el-input>
    </template>
    <template v-if="element.type == 'dialog'">
      <el-button
        :disabled="element.options.disabled"
        type="primary"
        :class="element.options.icon"
        >{{ element.options.btnName }}</el-button
      >
    </template>
    <template v-if="element.type == 'userDialog'">
      <el-button
        type="primary"
        :disabled="element.options.disabled"
        :class="element.options.icon"
        >{{ element.options.btnName }}</el-button
      >
    </template>

    <template v-if="element.type == 'textarea'">
      <el-input
        type="textarea"
        :rows="1"
        v-model="element.options.defaultValue"
        :style="blockStyle(isTable, '100%')"
        :disabled="element.options.disabled"
        :placeholder="element.options.placeholder"
      ></el-input>
    </template>

    <template v-if="element.type == 'iframe'">
      <iframe
        frameborder="0"
        scrolling="auto"
        :src="element.options.src"
        :style="blockStyle(isTable, '100%')"
        :height="element.options.height"
      ></iframe>
    </template>

    <template v-if="element.type == 'number'">
      <el-input-number
        v-model="element.options.defaultValue"
        :disabled="element.options.disabled"
        :controls-position="element.options.controlsPosition"
        :style="blockStyle(isTable, '100%')"
      ></el-input-number>
    </template>

    <template v-if="element.type == 'radio'">
      <el-radio-group
        v-model="element.options.defaultValue"
        :style="blockStyle(isTable, element.options.options)"
      >
        <el-radio
          :style="{
            display: element.options.inline ? 'inline-block' : 'block'
          }"
          :label="item.value"
          v-for="(item, index) in element.options.options"
          :key="item.value + index"
          :border="element.options.border"
          :disabled="element.options.disabled"
        >
          {{ element.options.showLabel ? item.label : item.value }}
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="element.type == 'checkbox'">
      <el-checkbox-group
        v-model="element.options.defaultValue"
        :style="{ width: isTable ? '100%' : element.options.width }"
      >
        <el-checkbox
          :style="{
            display: element.options.inline ? 'inline-block' : 'block'
          }"
          :label="item.value"
          v-for="(item, index) in element.options.options"
          :key="item.value + index"
        >
          {{ element.options.showLabel ? item.label : item.value }}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="element.type == 'time'">
      <el-time-picker
        v-model="element.options.defaultValue"
        :is-range="element.options.rangeAble"
        :placeholder="element.options.placeholder"
        :start-placeholder="element.options.startPlaceholder"
        :end-placeholder="element.options.endPlaceholder"
        :readonly="element.options.readonly"
        :disabled="element.options.disabled"
        :editable="element.options.editable"
        :clearable="element.options.clearable"
        :arrowControl="element.options.arrowControl"
        :style="{ width: '100%' }"
      >
      </el-time-picker>
    </template>

    <template v-if="element.type == 'date'">
      <el-date-picker
        v-model="element.options.defaultValue"
        :type="element.options.type"
        :is-range="element.options.rangeAble"
        :placeholder="element.options.placeholder"
        :start-placeholder="element.options.startPlaceholder"
        :end-placeholder="element.options.endPlaceholder"
        :readonly="element.options.readonly"
        :disabled="element.options.disabled"
        :editable="element.options.editable"
        :clearable="element.options.clearable"
        :style="blockStyle(isTable, '100%')"
      >
      </el-date-picker>
    </template>

    <template v-if="element.type == 'rate'">
      <el-rate
        v-model="element.options.defaultValue"
        :max="element.options.max"
        :style="blockStyle(isTable, '100%')"
        :disabled="element.options.disabled"
        :allow-half="element.options.allowHalf"
      ></el-rate>
    </template>
    <template v-if="element.type == 'tag'">
      <el-tag
        v-model="element.options.defaultValue"
        :size="element.options.radioSize"
        v-for="(tag, tagsIndex) in element.options.options"
        :key="tagsIndex"
        :type="tag.value"
      >
        {{ tag.label }}
      </el-tag>
    </template>
    <template v-if="element.type == 'link'">
      <el-link
        :href="element.options.href"
        v-model="element.options.defaultValue"
        :target="element.options.target"
        >{{ element.options.defaultValue }}</el-link
      >
    </template>
    <template v-if="element.type == 'badge'">
      <el-badge
        :value="element.options.defaultValue"
        :max="element.options.max"
        :is-dot="element.options.dot"
        v-model="element.options.defaultValue"
        class="item"
      >
      </el-badge>
    </template>
    <template v-if="element.type == 'inputNumber'">
      <el-input-number
        v-model="element.options.defaultValue"
        :max="element.options.max"
        :min="element.options.min"
        :step="element.options.step"
        :size="element.options.radioSize"
        :disabled="element.options.disabled"
      >
      </el-input-number>
    </template>
    <template v-if="element.type == 'h4'">
      <h4>{{ element.options.defaultValue }}</h4>
    </template>

    <template v-if="element.type == 'p'">
      <p>{{ element.options.defaultValue }}</p>
    </template>
    <template v-if="element.type == 'small'">
      <small>{{ element.options.defaultValue }}</small>
    </template>
    <template v-if="element.type == 'mark'">
      <mark>{{ element.options.defaultValue }}</mark>
    </template>

    <template v-if="element.type == 'del'">
      <del>{{ element.options.defaultValue }}</del>
    </template>
    <template v-if="element.type == 'u'">
      <u>{{ element.options.defaultValue }}</u>
    </template>
    <template v-if="element.type == 'em'">
      <em>{{ element.options.defaultValue }}</em>
    </template>

    <template v-if="element.type == 'strong'">
      <strong>{{ element.options.defaultValue }}</strong>
    </template>
    <template v-if="element.type == 'icon'">
      <i :class="element.options.icon">{{ element.options.defaultValue }}</i>
    </template>
    <template v-if="element.type == 'steps'">
      <el-steps
        :active="element.options.defaultValue"
        v-model="element.options.defaultValue"
        :finish-status="element.options.finishStatus"
        :align-center="element.options.alignCenter"
        :simple="element.options.simple"
        :process-status="element.options.processStatus"
        :direction="element.options.direction"
      >
        <el-step
          v-for="item in element.options.stepItemOptions"
          :title="item.value"
          :key="item.value"
        >
        </el-step>
      </el-steps>
    </template>

    <template v-if="element.type == 'breadcrumb'">
      <el-breadcrumb :separator="element.options.separator">
        <el-breadcrumb-item
          v-for="item in element.options.breadcrumbItemOptions"
          :key="item.value"
          :value="item.value"
        >
          {{ item.value }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </template>

    <template v-if="element.type == 'progress'">
      <el-progress
        :percentage="element.options.percentage"
        :type="element.options.progressType"
        :status="element.options.status"
        :show-text="element.options.showText"
        :stroke-width="element.options.strokeWidth"
        :text-inside="element.options.textInside"
      ></el-progress>
    </template>
    <template v-if="element.type == 'dateCalendar'">
      <el-calendar
        :disabled="element.options.disabled"
        v-model="element.options.defaultValue"
      >
      </el-calendar>
    </template>

    <template v-if="element.type == 'color'">
      <el-color-picker
        v-model="element.options.defaultValue"
        :disabled="element.options.disabled"
        :show-alpha="element.options.showAlpha"
        :style="blockStyle(isTable, '100%')"
      ></el-color-picker>
    </template>

    <template v-if="element.type == 'dividers'">
      <el-divider></el-divider>
    </template>

    <template v-if="element.type == 'alert'">
      <el-alert
        :title="element.options.title"
        :closable="element.options.closable"
        :show-icon="element.options.showIcon"
        :effect="element.options.item"
        :type="element.options.alertType"
        :close-text="element.options.closeText"
        :center="element.options.center"
        >{{ element.options.defaultValue }}</el-alert
      >
    </template>

    <template v-if="element.type == 'select'">
      <el-select
        v-model="element.options.defaultValue"
        :disabled="element.options.disabled"
        :multiple="element.options.multiple"
        :clearable="element.options.clearable"
        :placeholder="element.options.placeholder"
        :style="blockStyle(isTable, '100%')"
      >
        <el-option
          v-for="item in element.options.options"
          :key="item.value"
          :value="item.value"
          :label="element.options.showLabel ? item.label : item.value"
        ></el-option>
      </el-select>
    </template>

    <template v-if="element.type == 'switch'">
      <el-switch
        v-model="element.options.defaultValue"
        :disabled="element.options.disabled"
        :style="blockStyle(isTable, '100%')"
      >
      </el-switch>
    </template>
    <template v-if="element.type == 'processInfo'">
      <div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          version="1.1"
          id="图层_1"
          x="0px"
          y="0px"
          viewBox="0 0 510.2 49.1"
          style="enable-background:new 0 0 510.2 49.1;"
          xml:space="preserve"
        >
          <rect
            id="XMLID_1_"
            x="0.5"
            y="0.5"
            class="st0"
            width="509"
            height="24"
          />
          <rect
            id="XMLID_3_"
            x="0.5"
            y="24.5"
            class="st1"
            width="509"
            height="24"
          />
          <path
            id="XMLID_2_"
            class="st2"
            d="M401.3,48.5L401.3,48.5c-0.1,0-0.2-0.1-0.2-0.2v-46c0-0.1,0.1-0.2,0.2-0.2l0,0  c0.1,0,0.2,0.1,0.2,0.2v46C401.5,48.4,401.4,48.5,401.3,48.5z"
          />
          <path
            id="XMLID_6_"
            class="st2"
            d="M167.1,48.5L167.1,48.5c-0.1,0-0.2-0.1-0.2-0.2v-46c0-0.1,0.1-0.2,0.2-0.2l0,0  c0.1,0,0.2,0.1,0.2,0.2v46C167.4,48.4,167.3,48.5,167.1,48.5z"
          />
          <path
            id="XMLID_9_"
            class="st2"
            d="M258.1,48.5L258.1,48.5c-0.1,0-0.2-0.1-0.2-0.2v-46c0-0.1,0.1-0.2,0.2-0.2l0,0  c0.1,0,0.2,0.1,0.2,0.2v46C258.4,48.4,258.3,48.5,258.1,48.5z"
          />
          <text
            id="XMLID_4_"
            transform="matrix(1 0 0 1 64.1081 15.5519)"
            class="st3 st4 st5"
          >
            节点名称
          </text>
          <text
            id="XMLID_107_"
            transform="matrix(1 0 0 1 196.6081 15.5519)"
            class="st3 st4 st5"
          >
            执行人
          </text>
          <text
            id="XMLID_108_"
            transform="matrix(1 0 0 1 319.6081 15.5519)"
            class="st3 st4 st5"
          >
            审批意见
          </text>
          <text
            id="XMLID_109_"
            transform="matrix(1 0 0 1 433.1081 15.5519)"
            class="st3 st4 st5"
          >
            接受时间
          </text>

          <text
            id="XMLID_8_"
            transform="matrix(1 0 0 1 17.922 39.5519)"
            class="st3 st4 st5"
          >
            与财务审批流程相关的其他流程
          </text>
          <text
            id="XMLID_7_"
            transform="matrix(1 0 0 1 174.922 39.5519)"
            class="st3 st4 st5"
          >
            （财务经理）
          </text>
          <text
            id="XMLID_10_"
            transform="matrix(1 0 0 1 270.9221 39.5519)"
            class="st3 st4 st5"
          >
            BPM集团--同意
          </text>
          <text
            id="XMLID_11_"
            transform="matrix(1 0 0 1 418.9221 39.5519)"
            class="st3 st4 st5"
          >
            2019-11-12
          </text>
        </svg>
      </div>
    </template>

    <template v-if="element.type == 'slider'">
      <el-slider
        v-model="element.options.defaultValue"
        :min="element.options.min"
        :max="element.options.max"
        :disabled="element.options.disabled"
        :step="element.options.step"
        :show-input="element.options.showInput"
        :range="element.options.range"
        :showTooltip="element.options.showTooltip"
        :style="blockStyle(isTable, '100%')"
      ></el-slider>
    </template>
    <template v-if="element.type == 'btn'">
      <el-button
        :size="element.options.radioSize"
        :style="{ 'margin-left': element.options.marginLeft }"
        :type="element.options.type"
        :plain="element.options.plain"
        :round="element.options.round"
        :circle="element.options.circle"
        :loading="element.options.loading"
        :icon="element.options.icon"
        >{{ element.options.name }}</el-button
      >
    </template>

    <template v-if="element.type == 'imgupload'">
      <image-upload
        v-model="element.options.defaultValues"
        :disabled="element.options.disabled"
        :style="{ width: isTable ? '100%' : element.options.width }"
        :width="element.options.size.width"
        :height="element.options.size.height"
        token="xxx"
        domain="xxx"
      >
      </image-upload>
    </template>
    <!-- 文件上传的表单 -->
    <template v-if="element.type == 'fileUpload'">
      <fm-upload
        :disabled="element.options.disabled"
        :style="{ width: isTable ? '100%' : element.options.width }"
        :width="element.options.sizes.width"
        :height="element.options.sizes.height"
        :token="element.options.token"
        :domain="element.options.domain"
        :multiple="element.options.multiple"
        :length="element.options.length"
        :is-qiniu="element.options.isQiniu"
        :is-delete="element.options.isDelete"
        :min="element.options.min"
        :is-edit="element.options.editable"
        :action="element.options.action"
        :supportedTypeStr="element.options.supportedTypeStr"
      >
      </fm-upload>
      <!--      </fm-upload>-->
    </template>
    <template v-if="element.type == 'cascader'"> </template>

    <template v-if="element.type == 'blank'">
      <div
        style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;"
      >
        自定义区域
      </div>
    </template>

    <template v-if="element.type == 'text'">
      <span v-if="element.options.tip.length > 0">
        <el-tooltip
          class="item"
          effect="dark"
          :content="element.options.tip"
          placement="right-end"
        >
          <span
            :style="{
              'font-weight': element.options.bold ? 'bold' : 'normal',
              color: element.options.color,
              fontSize: element.options.fontSize + 'px'
            }"
            >{{ element.options.defaultValue }}</span
          >
        </el-tooltip>
      </span>
      <span v-else>
        <span
          :style="{
            'font-weight': element.options.bold ? 'bold' : 'normal',
            color: element.options.color,
            fontSize: element.options.fontSize + 'px'
          }"
          >{{ element.options.defaultValue }}</span
        >
      </span>
    </template>
    <template v-if="element.type == 'distpicker'">
      <v-distpicker province="省" city="市" area="区"></v-distpicker>
    </template>
    <template v-if="element.type == 'vue2Editor'">
      <vue-editor v-model="element.options.defaultValue" />
    </template>

    <!-- 自定义 -->
    <!-- 提示弹窗 -->
    <template v-if="element.type == 'tipsDialog'">
      <p style="color: #999">
        该定制组件用于配置是否在打开填写页面时有弹窗提示功能
      </p>
      <el-input :placeholder="element.options.placeholder" :disabled="true">
      </el-input>
    </template>

    <template v-if="element.type == 'changeChromeScroll'">
      <div>
        ../styles/changeChromeScroll.css
      </div>
    </template>

    <template v-if="element.type == 'clickCopyValue'">
      <div>
        ./code/copy.vue
      </div>
    </template>

    <template v-if="element.type == 'parseImage'">
      <div>
        ./code/parseImage.vue
      </div>
    </template>

    <template v-if="element.type == 'uploadSelf'">
      <div>
        ./code/parseImage.vue
      </div>
    </template>
  </span>
</template>

<script>
import FmUpload from "./Upload";
import ImageUpload from "./widget/image/index";
import VDistpicker from "v-distpicker";
import { VueEditor } from "vue2-editor";

export default {
  components: {
    FmUpload,
    VDistpicker,
    VueEditor,
    ImageUpload
  },
  props: ["element", "isTable"],
  methods: {
    blockStyle(ele, styleVal) {
      if (ele == "block") {
        //console.log(2222);
        return "width:90%;margin-left:10px";
      } else {
        if (ele == "true") {
          return "width:100%";
        } else {
          return "width:" + styleVal + "px";
        }
      }
    }
  }
};
</script>

<style type="text/css">
.st0 {
  fill: #f9f9f9;
  stroke: #f9f9f9;
  stroke-miterlimit: 10;
}

.st1 {
  fill: #ffffff;
  stroke: #f9f9f9;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #ffffff;
  stroke: #f9f9f9;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}

.st3 {
  opacity: 0.65;
  fill: #040000;
}

.st4 {
  font-family: "MicrosoftYaHei";
}

.st5 {
  font-size: 10px;
}
</style>
